<template>
  <div class="good-info">
    <!--店铺名称-->
    <!-- <div class="info-store mb-24 pb-12 flex a-c j-sb" v-if="storeInfo && storeInfo.shopId">
			<div class="flex a-c f-1">
				<img v-if="storeInfo.shopImg" class="store-icon br-10" :src="storeInfo.shopImg" />
				<img v-else-if="info.channel && storeIcon[info.channel]" class="store-icon br-10" :src="require(`@/assets/images/${storeIcon[info.channel]}`)" />
				<div class="store-text ml-12 o-1 f-20 lin-28 bold col-1e1">
					{{storeInfo.shopName||''}}
				</div>
			</div>
			<div class="c-p btn-store bg-fdf col-ff1 br-6 plr-16 f-20 flex a-c j-c lin-20" @click="stoteDetail">
				{{$t('store.goodsToStore')}}
			</div>
		</div> -->
    <!--商品信息-->

    <div class="good-info-main" :class="scrollTop > distanceFromTop ? 'fixed' : ''">
      <div class="title">
        <div class="title-left">
          <div class="text f-1">
            <t-platform class="type" :type="info.channel"></t-platform>
            {{ info.subject }}
          </div>
        </div>
        <div class="volume" v-if="info.monthSold">
          <span class="num">{{ info.monthSold }}</span>
          <Tooltip placement="top-start" max-width="300">
            <div class="price" slot="content">
              <div class="price-value" style="font-size: 12px">
                {{ $t("goods.dayHint") }}
              </div>
            </div>
            <div class="tooltip-text">
              <span>{{ $t("goods.monthlySales") }}</span>
              <img class="icon" src="@/assets/images/public/help-icon.png" alt="" />
            </div>
          </Tooltip>
        </div>
      </div>
      <!-- 拼团 -->
      <div v-if="info.spuActivityVO" class="booking-detail">
        <!-- 原价 -->
        <div class="booking-original">
          <div class="original-num">{{ $t('goods.originalPrice') }}：</div>
          <!-- cny价格 -->
          <div v-if="userCurrency !== 'CNY'" class="original-cny">
            <div>CNY</div>
            <div class="original-ml8">{{ getDisposePrice('originalPriceCNY') }}</div>
            <div style="margin: 0 8px;">≈</div>
          </div>
          <div class="original-cny">
            <div>{{ userCurrency }}</div>
            <div class="original-ml8">{{ getDisposePrice('originalPrice') }}</div>
          </div>
        </div>
        <!-- 拼团价 -->
        <div class="booking-price">
          <!-- 拼团价 -->
          <div class="booking-left">
            <div class="bleft-text">
              {{ $t('goods.group_play_text1') }}:
            </div>
            <div class="bright-text">
              {{ userCurrency }} {{ calculatePrice() }}
            </div>
            <Icon type="ios-help-circle-outline" color="#FF186B" size="22" class="tooltip"
              style="cursor: pointer;font-weight: 600;line-height: 22px;margin-top: -1px;" @click="groupNotice" />
          </div>
          <!-- 闪电 -->
          <img src="@/assets/images/public/driver.png" class="driver-img" alt="">
          <!-- 邀请新人一起买 -->
          <div class="booking-right">
            {{ $t('goods.group_play_text57') }}
          </div>
          <!-- sale -->
          <img src="@/assets/images/pay/label_tag.png" class="label-tag" alt="">
          <!-- 折扣 -->
          <div class="booking-discount">
            <div>
              <div class="discount-div">
                {{ bigTimes(Number(info.discount), 100) }}% OFF
              </div>
              <div class="discount-faj">
                <div class="discount-label"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--售价-->
      <div v-else class="price-top">
        <span class="goods-img">
          <img :src="currentSelectInfo.image" alt="" />
        </span>
        <!-- 原价 -->
        <div class="top-original" v-if="info.priceMode">
          <div class="original-text">{{ $t('goods.originalPrice') }}</div>
          <div class="original-price">
            <span v-if="userCurrency !== 'CNY'" class="label">CNY1</span>
            <span v-if="userCurrency !== 'CNY'" class="price-num">{{ getDisposePrice('originalPriceCNY') }}</span>
            <span v-if="userCurrency !== 'CNY'" class="price-y">≈</span>
            <span>{{ userCurrency }}</span>
            <span class="price-num">{{ getDisposePrice('originalPrice') }}</span>
            <div class="price-line"></div>
          </div>
        </div>
        <div class="price-wrap">
          <span class="price" v-html="priceVal()"></span>
          <!-- 改价编辑 -->
          <!-- <div class="edit" @click="editBtn()">
            <Icon type="ios-create-outline" size="18" color="#333333" />
            <span>{{ $t('user.change') }}</span>
          </div> -->
          <!-- 立减 -->
          <div class="price-save" v-if="info.priceMode">
            <Icon type="ios-checkmark-circle" color="#32CB9D" size="19" />
            <span class="save-text">{{ $t('goods.goodsSave') }} {{ info.priceMode == 'percent' ?
              `${bigTimes(Number(info.discount), 100)}%` : `CNY${info.discount || 0}` }}</span>
          </div>
        </div>
        <div class="tips" v-if="info.sevenDaysRefunds == true">{{ $t("user.exchange_tips") }}</div>
        <div class="ffun-w">
          <div class="ffun" @click="directLink">
            <img src="@/assets/images/icons/icon_link.png" class="w-4 h-4">
            <span class="">{{ $t("goods.directLink") }}</span>
          </div>
          <div class="ffun-s">
            <div class="" role="separator" style="--el-border-style: solid;">|</div>
          </div>
          <div class="ffun" @click="onCopy">
            <img src="@/assets/images/icons/icon_copy.png" class="w-4 h-4">
            <span class="">{{ $t("goods.copyLink") }}</span>
          </div>
          <div class="ffun-s">
            <div class="" role="separator" style="--el-border-style: solid;">|
            </div>
          </div>
          <div class="ffun" @click="refreshPage">
            <img src="@/assets/images/icons/icon_refresh.png" class="w-4 h-4">
            <span class="">{{ $t("goods.forcedRefresh") }}</span>
          </div>
        </div>
      </div>
      <div class="pay-text">
        {{ $t("goods.paymentPurchasing") }}
      </div>
      <!-- 拼团列表 -->
      <div v-if="info.spuActivityVO" class="group-mt24">
        <group-screen :userCurrency="userCurrency" :infoData="info.spuActivityVO"
          :subtract="subtractMet()"></group-screen>
      </div>
      <div class="logistics-info" v-else>
        <div class="logistics-item">
          <img class="sept-icon" src="@/assets/images/public/one.png" alt="" />
          <div class="left top-left">
            <div class="left-content-wrap">
              <div class="left-content">
                <span class="text">{{ $t("goods.merchant") }}</span>
                <img class="icon" src="@/assets/images/public/arrow-right.png" alt="" />
                <span class="text">{{
                  $t("goods.warehouseFreight", { appName: appName })
                  }}</span>
                <i18n path="goods.actualShippingSubjectOrderConfirmation" class="input-amount">
                  <span class="text" slot="text">{{
                    $t("goods.shippingFee")
                    }}</span>
                  <Input v-model="freightFee" class="free" slot="fee" size="small" placeholder="" readonly />
                </i18n>
              </div>
            </div>
            <div class="left-text-wrap">
              <span class="hint-text">{{
                $t("goods.actualShippingConfirmationPage")
                }}</span>
            </div>
          </div>
        </div>
        <div class="logistics-line"></div>
        <div class="logistics-item">
          <img class="sept-icon" src="@/assets/images/public/two.png" alt="" />
          <div class="left">
            <span class="text">{{
              $t("goods.stash", { appName: appName })
              }}</span>
            <img class="icon" src="@/assets/images/public/arrow-right.png" alt="" />
            <span class="text">{{ $t("goods.address") }}</span>
            <router-link to="/estimation" class="estimate">{{
              $t("goods.estimatedInternationalFreight")
              }}</router-link>
          </div>
        </div>
        <Badge :text="$t('estimation.limited_text')" :offset="[16, -8]">
          <span class="tips-img"><img src="@/assets/images/icons/icon_free.png" />{{ $t('goods.detail_tips') }}</span>
        </Badge>
      </div>

      <!--选择商品尺寸/类型-->
      <div class="select-type-box">
        <commodity-specification @on-change="onSelect" :info="info"></commodity-specification>

        <div class="type-item order-num">
          <div class="type-label">{{ $t("goods.quantity") }}: </div>
          <div class="left">
            <div class="left-content">
              <InputNumber :min="info.startQuantity" v-model="form.quantity" size="large" controls-outside>
              </InputNumber>
              <span class="amount-sale" v-if="currentSelectInfo">{{ $t("goods.inventory") }}({{ currentSelectInfo.stock
                }})</span>
              <span class="line"></span>
              <span class="min-quantity" v-if="info.startQuantity">{{ $t("goods.minimumQuantity") }}：{{
                info.startQuantity
                }}</span>
            </div>
          </div>
        </div>

        <div class="flow"></div>
        <Checkbox v-model="single">
          <span class="agree">{{ $t("goods.agree") }} to the proxy shopping service agreement of

            <Tooltip max-width="450" theme="light" placement="top-end">
              <span class="link">xxxxxxxxxxxx</span>
              <div slot="content">
                <div class="buy-tips tips-text" style="width:400px;">
                  <Icon type="ios-alert" color="#FF186B" size="20" />
                  <div class="text-sub">
                    {{ $t("goods.platform", { appName: appName }) }}
                  </div>
                </div>
              </div>
            </Tooltip>.
          </span>
        </Checkbox>

        <div class="buy">
          <span class="add-btn" :loading="addLoading" @click="onCartAdd">
            {{ $t("goods.addCart") }}
          </span>
          <span class="buy-btn" :loading="buyLoading" @click="onOrderCreate" ref="targetElement">
            {{ $t("goods.buy") }}
          </span>
          <span class="pin-area" v-if="info.spuActivityVO">
            <span class="pin-btn" @click="groupBtn()">
              {{ info.spuActivityVO?.groupUserType == 1 ? $t('goods.group_play_text8') : $t('goods.group_play_text2') }}
            </span>
            <span class="tag-ri">
              {{ info.priceMode == 'percent' ? `${bigTimes(Number(info.discount), 100)}%` :
                `CNY${info.discount || 0}` }} <span class="symbol-icon">OFF</span>
              <Icon type="ios-help-circle-outline" size="18" class="tooltip" style="cursor: pointer;"
                @click="groupNotice" />
            </span>
          </span>
        </div>
      </div>



    </div>

    <div :style="{ height: distanceFromTop + 'px' }" v-if="scrollTop > distanceFromTop"></div>

    <!-- 留言 -->
    <div class="select-type-box">
      <div class="type-item">
        <span class="type-label">{{ $t("goods.leaveMessage") }}: <span class="num">({{ form.remarks.length
            }}/1000)</span></span>
        <div class="list-sty">
          <Input class="textarea" v-model="form.remarks" type="textarea" maxlength="1000" :rows="4"
            :placeholder="$t('goods.messagesProcurement')" :autosize="{ maxRows: 4, minRows: 4 }" />
          <!-- <img src="@/assets/images/public/gap_icon.png" class="gap-icon" alt=""> -->
          <Upload :show-upload-list="false" :headers="{
            'X-Access-Token': userToken,
            'lang': 'en_US'
          }" biz="chat" :data="{
            biz: 'custom'
          }" name="file" :disabled="uploadLoading" :max-size="3072" :before-upload="handleBeforeUpload"
            :on-success="onSuccess" :on-exceeded-size="handleMaxSize" :action="uploadURL">
            <div class="loading-wrap" v-if="uploadLoading">
              <t-loading></t-loading>
            </div>
            <div v-if="urlImage != ''" class="preview-img">
              <img class="upload-image" :src="urlImage" alt="" />
              <img src="@/assets/images/public/delete.png" class="delete-icon" @click="removeMet($event)" alt="">
              <div class="overlay"></div>
            </div>
            <div v-if="!urlImage & !uploadLoading" class="upload-sty">
              <img src="@/assets/images/icons/icon_def_img.png" class="upload-img" alt="">
              <div class="bot-text">{{ $t('custom.pic_tip') }}</div>
            </div>
          </Upload>
        </div>
      </div>
    </div>
    <!-- 定制服务 -->
    <custom-service ref="customRef" @parentSendData="parentSendData" @parentVidData="parentVidData"
      :isShowVideo="info"></custom-service>

    <div class="buy-tips buy-help">
      {{ $t("goods.strictlyFollow", { appName: appName }) }}
    </div>

    <div class="div-line"></div>



    <notice ref="notice" />
    <t-edit-price ref="editRef" @changePrice="changePrice" :popPrice="popPrice"></t-edit-price>
    <!-- 拼团弹窗提示 -->
    <result-draw-pop ref="unJoinRef" @againEmit="againEmit"></result-draw-pop>
  </div>
</template>

<script>
import TLoading from "@/components/t-loading";
import CommSize from "@/views/main/goods/goods-details/components/comm-size";
import CommImage from "@/views/main/goods/goods-details/components/comm-image";
import { cartAdd, cartBalanceAccounts } from "@/api/cart";
import { orderCreate } from "@/api/order";
import { commonUpload } from "@/api/sys";
import { infoShop } from "@/api/product";
import CommoditySpecification from "@/views/main/goods/goods-details/commodity-specification";
import { mapState } from "vuex";
import TPlatform from "@/components/t-platform";
import { debounce, fromSeoFriendsChannel } from "@/common/common";
import { bigTimes, bigMinus } from "@/common/digital-computation";
import notice from "@/components/t-noticeModal";
import TEditPrice from "@/components/t-edit-price";
import customService from "./components/custom-service";
import { pointUser } from "@/common/point/api-hook";//打点日志
import GroupScreen from './components/group-screen.vue';
import ResultDrawPop from '../../activity/freeShipping/components/result-draw-pop.vue';
import { storeIcon } from '@/common/enum';

export default {
  name: "good-info",
  components: { TPlatform, CommoditySpecification, CommImage, CommSize, notice, TLoading, TEditPrice, customService, GroupScreen, ResultDrawPop },
  props: {
    info: Object,
    activityCode: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      storeIcon,
      bigTimes,
      buyLoading: false,
      addLoading: false,
      currentSelectInfo: {
        price: 0,
        priceCNY: 0,
        image: '',
        originalPriceCNY: 0,
        originalPrice: 0
      },
      setFreightPrice: false,
      single: true,
      appName: process.env.VUE_APP_NAME,
      form: {
        channel: this.info.channel, // 商品来源渠道：TAOBAO-淘宝，1688-阿里巴巴，JD-京东，PDD-拼多多，DOUYIN-抖音，100buy-平台上架，MERCH-商户
        expressFee: this.info.expressFee, // 国内运费
        quantity: this.info.startQuantity < 1 ? 1 : this.info.startQuantity, // 商品数量(计算金额用)，必填
        skuNo: "", //  系统商品编号/货号：系统唯一
        spuNo: this.info.spuNo, // SPU产品编号
        remarks: "",
        manuaAdjustRemark: '',
        manuaPrice: '',
        manuaAdjustImage: '',
        notSupportQcVideos: Boolean
      },
      remarks: "", // 备注
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
      uploadLoading: false,
      imageList: '',
      urlImage: '',
      idValue: Number,
      channelValue: Number,
      afterPrice: '',
      popPrice: 0,
      freightFee: '',
      storeInfo: {},

      distanceFromTop: 0,
      scrollHandler: null,
      scrollTop: 0,
    };
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      userCurrency: (state) => {
        return state.user.userCurrency.code;
      },
      userInfo: state => state.user.userInfo,
      // userInfo: (state) => {
      //   //  ENABLE 老用户，DISABLE 新用户
      //   return state.user.userInfo.orderFlag == 'DISABLE';
      // },
    }),
  },
  watch: {
    userInfo: {
      immediate: true, // 立即执行一次
      deep: true,
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          // 获取地址栏的完整URL
          const currentUrl = window.location.href;
          // 将 URL 转换为 URL 对象，以便方便地操作查询参数
          const urlObj = new URL(currentUrl);
          // 获取 inviteCode 参数的值
          const inviteCodeParam = urlObj.searchParams.get('inviteCode');
          if (inviteCodeParam) {
            // 达人货盘
            if (inviteCodeParam !== this.userInfo.inviteCode) {
              pointUser('actions', '2000-1');
            } else {
              //  用户主动行为
              pointUser('actions', '2002');
            }
          }
        }
      }
    },
    info: {
      immediate: true,
      handler(n) {
        if (n && n.shopId) {
          this.getStoreInfo();
        }
      }
    }
  },
  mounted() {
    try {
      this.$nextTick(() => {
        const element = this.$refs.targetElement;
        this.distanceFromTop = element.getBoundingClientRect().top + window.scrollY;

        // 使用节流函数优化性能
        this.scrollHandler = this.throttle(this.handleScroll, 100);
        window.addEventListener('scroll', this.scrollHandler);
        this.calculateDistance();
      });
    } catch (e) {
      console.log(e);
    }

    try {
      if (this.$route.params.spuNo) {
        this.idValue = this.$route.params.spuNo;
        this.channelValue = fromSeoFriendsChannel(this.$route.params.channel);
        return;
      } else if (this.$route.query.id) {
        this.idValue = this.$route.query.id;
        this.channelValue = this.$route.query.channel;
      }

      console.log('111');
    } catch (e) {
      console.log(e);
    }
  },
  created() {
    if (this.info.expressFee) {
      this.freightFee = this.info.expressFee;
    } else {
      this.freightFee = this.$t("goods.free");
    }
    if (this.info.notSupportQcVideos) {
      this.form.notSupportQcVideos = this.info.notSupportQcVideos;
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrollHandler);
  },
  methods: {
    // 节流函数
    throttle(fn, delay) {
      let lastTime = 0;
      return function () {
        const now = new Date().getTime();
        if (now - lastTime >= delay) {
          fn.apply(this, arguments);
          lastTime = now;
        }
      };
    },
    handleScroll() {
      this.calculateDistance();
    },
    calculateDistance() {
      this.scrollTop = window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
    },
    priceVal() {
      if (this.currentSelectInfo.price && this.afterPrice == '') {
        const price = this.currentSelectInfo.priceCNY ? this.currentSelectInfo.priceCNY : this.currentSelectInfo.price;
        if (this.userCurrency == 'CNY') {
          return `<span class="big-label">CNY</span> <span class="big-text">${price}</span>`
        } else {
          return `<span class="big-label">CNY</span> <span class="big-text">${price}</span><span class="big-label">≈ ${this.userCurrency}</span><span class="big-text">${this.currentSelectInfo.price}</span>`
        }
      } else if (this.afterPrice) {
        return `<span class="big-label">CNY</span> <span class="big-text">${this.afterPrice}</span>`
      } else if (this.info.price) {
        const price = this.info.priceCNY ? this.info.priceCNY : this.info.price;
        if (this.userCurrency == 'CNY') {
          return `<span class="big-label">CNY</span> <span class="big-text">${price}</span>`
        } else {
          return `<span class="big-label">CNY</span> <span class="big-text">${price}</span> <span clas="big-label">≈ ${this.userCurrency}</span><span class="big-text">${this.info.price}</span>`
        }
      } else if (this.info.saleInfo) {
        if (this.info.saleInfo.priceRangeList && this.info.saleInfo.priceRangeList.length > 0) {
          const price = this.info.saleInfo.priceRangeList[0].priceCNY ? this.info.saleInfo.priceRangeList[0].priceCNY : this.info.saleInfo.priceRangeList[0].price;
          if (this.userCurrency == 'CNY') {
            return `<span class="big-label">CNY</span> <span class="big-text">${price}</span>`
          } else {
            return `<span class="big-label">CNY</span> <span class="big-text">${price}</span> <span class="big-label">≈ ${this.userCurrency}</span> <span class="big-text">${this.info.saleInfo.priceRangeList[0].price}</span>`
          }
        } else {
          const price = this.info.saleInfo.priceRanges && this.info.saleInfo.priceRanges.length > 0 && this.info.saleInfo.priceRanges[0].priceCNY ? this.info.saleInfo.priceRanges[0].priceCNY : "";
          const convertPrice = this.info.saleInfo.priceRanges && this.info.saleInfo.priceRanges.length > 0 ? this.info.saleInfo.priceRanges[0].price : "";
          if (this.userCurrency == 'CNY') {
            return `<span class="big-label">CNY</span> <span class="big-text">${price}</span>`
          } else {
            return `<span class="big-label">CNY</span> <span class="big-text">${price}</span><span <span class="big-label">≈ ${this.userCurrency}</span>class="big-text">${convertPrice}</span>`
          }
        }
      }
    },
    subtractMet() {
      return bigMinus(this.getDisposePrice('originalPrice'), this.calculatePrice()) || 0;
    },
    // 拼团显示换算的币种金额
    calculatePrice() {
      if (this.currentSelectInfo.price && this.afterPrice == '') {
        const price = this.currentSelectInfo.priceCNY ? this.currentSelectInfo.priceCNY : this.currentSelectInfo.price;
        if (this.userCurrency == 'CNY') {
          return `${price}`
        } else {
          return `${this.currentSelectInfo.price}`
        }
      } else if (this.afterPrice) {
        return `${this.afterPrice}`
      } else if (this.info.price) {
        const price = this.info.priceCNY ? this.info.priceCNY : this.info.price;
        if (this.userCurrency == 'CNY') {
          return `${price}`
        } else {
          return `${this.info.price}`
        }
      } else if (this.info.saleInfo) {
        if (this.info.saleInfo.priceRangeList && this.info.saleInfo.priceRangeList.length > 0) {
          const price = this.info.saleInfo.priceRangeList[0].priceCNY ? this.info.saleInfo.priceRangeList[0].priceCNY : this.info.saleInfo.priceRangeList[0].price;
          if (this.userCurrency == 'CNY') {
            return `${price}`
          } else {
            return `${this.info.saleInfo.priceRangeList[0].price}`
          }
        } else {
          const price = this.info.saleInfo.priceRanges && this.info.saleInfo.priceRanges.length > 0 && this.info.saleInfo.priceRanges[0].priceCNY ? this.info.saleInfo.priceRanges[0].priceCNY : "";
          const convertPrice = this.info.saleInfo.priceRanges && this.info.saleInfo.priceRanges.length > 0 ? this.info.saleInfo.priceRanges[0].price : "";
          if (this.userCurrency == 'CNY') {
            return `${price}`
          } else {
            return `${convertPrice}`
          }
        }
      }
    },
    // 定制照片数据
    parentSendData(info) {
      // 去掉空值数据
      // const filteredData = info.filter(item => {
      //   return Object.values(item).every(value => value !== '' && value !== null);
      // });
      const filteredData = info.filter(item => {
        return item.serviceRemark !== '' && item.serviceRemark !== null ||
          item.imageUrl !== '' && item.imageUrl !== null;
      });
      this.form.services = filteredData;
    },
    // 定制视频数据
    parentVidData(info) {
      // 去掉空值数据
      const newArray = info.map(item => ({
        videoType: item.videoType,
        serviceType: 2
      }));
      this.form.videoServices = newArray;
    },
    // 改价弹框
    editBtn() {
      this.$refs.editRef.editPop = true;
    },
    // 改价返回的值
    changePrice(info) {
      this.$emit('changePreVal', info.manuaPrice);
      this.afterPrice = info.manuaPrice;//改价后的价格
      this.form.manuaPrice = info.manuaPrice;//改价后的价格
      this.form.manuaAdjustRemark = info.manuaAdjustRemark;//改价原因
      this.form.manuaAdjustImage = info.manuaAdjustImage;//改价图片
    },
    getDisposePrice(type) {
      let val = this.currentSelectInfo[type] ? this.currentSelectInfo[type] :
        this.info[type] ? this.info[type] :
          this.info.saleInfo.priceRangeList && this.info.saleInfo.priceRangeList.length > 0 ?
            this.info.saleInfo.priceRangeList[0][type] :
            info.saleInfo.priceRanges && info.saleInfo.priceRanges.length > 0 ?
              info.saleInfo.priceRanges[0][type] : 0;
      return val || 0;
    },
    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.urlImage = data.url;
        this.imageList = data.url;
      } else {
        this.$Message.error(response.message);
      }
    },
    onError(error, file) {
      this.$Message.error(this.$t('user.uploadFailure'));
    },
    handleBeforeUpload(file) {
      this.uploadLoading = true;
    },
    removeMet(event) {
      event.stopPropagation();
      // 删除图片
      this.imageList = '';
      this.urlImage = '';
    },
    async onCopy() {
      const { inviteCode } = await this.$store.dispatch("getUserInfo");
      let _this = this;
      // const url = inviteCode
      //   ? `${ window.location.href }& inviteCode=${ inviteCode || "" } `
      //   : window.location.href;
      this.$copyText(window.location.href).then(
        function () {
          _this.$Message.success(_this.$t("public.copySuccess"));
        },
        function () {
          _this.$Message.error(_this.$t("public.copyFail"));
        }
      );
    },
    directLink() {
      // 打开外部链接
      window.open(this.info.detailUrl);
    },
    refreshPage() {
      this.$emit('refreshData', 1);
    },
    onSelect(info) {
      // 选择商品规格
      this.currentSelectInfo = info;
      this.form.skuNo = info.skuNo;
      this.$emit("on-change", info);
    },
    onCartAdd(el) {
      this.form.notSupportQcVideos = this.info.notSupportQcVideos;
      // 修改的运费有值且跟之前的值不相同再赋值改价运费
      if (this.freightFee && this.freightFee != this.info.expressFee && Number(this.freightFee)) {
        this.form.manuaExpressFee = Number(this.freightFee) < 0 ? 0 : this.freightFee;
      }
      this.$emit("taobaoAdd");//淘宝加购物车埋点
      // 添加购物车埋点
      if (this.$analytics) {
        this.$analytics.logEvent('addCar');
      }

      this.form.imageRemarks = this.imageList;//定制化要求
      // 添加购物车

      // 这段代码是弹框的显示，暂时隐藏，不要删除，后续会用到
      // if (this.userInfo) {
      //   this.$refs.notice.init();
      //   return
      // }
      if (this.info.skuVoList && this.info.skuVoList.length > 0) {
        if ((this.info.skuVoList.length == 1 && !this.info.skuVoList[0]['skuAttr']) || (this.info.skuVoList.length == 1 && this.info.skuVoList[0]['skuAttr'].length == 0)) { // 特殊处理淘宝只有一个规格情况
          this.form.skuNo = this.info.skuVoList[0]['skuNo']
        } else if (!this.form.skuNo) {
          this.$Message.error(this.$t("goods.selectSpecifications"));
          return false;
        }
      }


      // if(this.form.quantity < this.info.startQuantity) {
      //   this.$Message.error(this.$t('goods.minimumQuantity')+':' + this.info.startQuantity);
      //   return false;
      // }

      if (!this.single) {
        this.$Message.error(
          this.$t("goods.platform", { appName: this.appName })
        );
        return false;
      }
      this.addLoading = true;

      pointUser('actions', '2004');

      cartAdd(this.form).then((res) => {
        this.$store.commit("setCartEvent", {
          el: el,
        });
        this.form.services = [];
        this.form.videoServices = [];
        this.$store.commit("setCartNum", res.result.cartSize);
        this.$Message.success(this.$t("goods.addSuccess"));
        this.addLoading = false;
      })
        .catch(() => {
          this.addLoading = false;
        });
    },
    onOrderCreate: debounce(function () {
      this.form.notSupportQcVideos = this.info.notSupportQcVideos;
      // 修改的运费有值且跟之前的值不相同再赋值改价运费
      if (this.freightFee && this.freightFee != this.info.expressFee && Number(this.freightFee)) {
        this.form.manuaExpressFee = Number(this.freightFee) < 0 ? 0 : this.freightFee;
      }
      this.$emit('taobaoBuy');//购买按钮淘宝埋点
      this.form.imageRemarks = this.imageList;//定制化要求
      // 立即购买
      if (this.$analytics) {
        this.$analytics.logEvent('purchase');
      }

      // 这段代码是弹框的显示，暂时隐藏，不要删除，后续会用到
      // if (this.userInfo) {
      //   this.$refs.notice.init();
      //   return
      // }
      // 下单
      if (this.info.skuVoList && this.info.skuVoList.length > 0) {
        if ((this.info.skuVoList.length == 1 && !this.info.skuVoList[0]['skuAttr']) || (this.info.skuVoList.length == 1 && this.info.skuVoList[0]['skuAttr'].length == 0)) { // 特殊处理淘宝只有一个规格情况
          this.form.skuNo = this.info.skuVoList[0]['skuNo']
        } else if (!this.form.skuNo) {
          this.$Message.error(this.$t("goods.selectSpecifications"));
          return false;
        }
      }

      // if(this.form.quantity < this.info.startQuantity) {
      //   this.$Message.error(this.$t('goods.minimumQuantity')+':' + this.info.startQuantity);
      //   return false;
      // }

      if (!this.single) {
        this.$Message.error(
          this.$t("goods.platform", { appName: this.appName })
        );
        return false;
      }
      this.buyLoading = true;
      // 立即购买默认走加入购物车
      cartAdd(this.form).then((res) => {
        this.addLoading = false;
        this.form.services = [];
        this.form.videoServices = [];
        let ids = [];
        ids.push(res.result.currentCartItemId)

        pointUser('actions', '2003');

        // 再生成预下单临时单号
        cartBalanceAccounts(ids).then((res) => {
          this.loading = false;
          this.$router.push(`/confirm/order?id=${res.result}`);
        }).catch(() => {
          this.loading = false;
        })
      }).catch(() => {
        this.addLoading = false;
      });
      // orderCreate({
      //   orderItemList: [this.form],
      //   remarks: this.remarks,
      //   imageRemarks: this.imageList
      // })
      //   .then((res) => {
      //     this.buyLoading = false;
      //     this.$router.push(`/ confirm / order ? id = ${ res.result } `);
      //   })
      //   .catch(() => {
      //     this.buyLoading = false;
      //   });
    }, 1000),
    groupBtn() {
      // 先判断是否是参团的人
      if (this.info.spuActivityVO && this.info.spuActivityVO.groupUserType == 2) {
        if (this.info.spuActivityVO.errorType == 'INVITED_USER_TYPE') {
          this.$refs.unJoinRef.open({ type: this.info.spuActivityVO.errorType });  // 被邀请用户类型限制
          return;
        } else if (this.info.spuActivityVO.errorType == 'GROUP_NUM_LIMIT') {
          this.$refs.unJoinRef.open({ type: this.info.spuActivityVO.errorType });// 拼团人满
          return;
        } else if (this.info.spuActivityVO.errorType == 'GROUP_END') {
          this.$refs.unJoinRef.open({ type: this.info.spuActivityVO.errorType });// 拼团结束
          return;
        }
      } else {
        // 用户点击“立即开团”打点
        if (this.$analytics) {
          this.$analytics.logEvent('pt_1002');
        }
      }

      this.form.source = 4;
      this.form.activityId = this.info.spuActivityVO.activityId;
      // 拼团接口 默认也走预下单
      cartAdd(this.form).then((res) => {
        this.addLoading = false;
        this.form.services = [];
        this.form.videoServices = [];
        let ids = [];
        ids.push(res.result.currentCartItemId)

        // pointUser('actions', '2003');

        // 再生成预下单临时单号
        cartBalanceAccounts(ids).then((res) => {
          this.loading = false;
          this.$router.push(`/confirm/order?id=${res.result}&activityCode=${this.activityCode || ''}`);
        }).catch(() => {
          this.loading = false;
        })
      }).catch(() => {
        this.addLoading = false;
      })
    },
    // 重新开团
    againEmit() {
      let str = window.location.href;
      if (str.indexOf('&activityCode') != -1) {
        let url = str.split('&activityCode')[0]
        window.location.href = url;
      }
    },
    //拼团文章
    groupNotice() {
      this.$router.push(`/noticeCode/${this.info.spuActivityVO.ruleContentCode}`);
    },
    //获取店铺详情
    getStoreInfo() {
      let data = {
        channel: this.info.channel,
        shopId: this.info.shopId
      }
      infoShop(data).then(res => {
        this.storeInfo = res.result;
      })
    },
    //进入店铺
    stoteDetail() {
      if (this.$analytics) {
        this.$analytics.logEvent('dy_3006');
      }
      this.$router.push(`/store?shopId=${this.storeInfo.shopId}&channel=${this.info.channel}`)
    }
  },
};
</script>

<style scoped lang="less">
.ffun-w {
  margin-top: 10px;
  display: flex;
  padding: 16px 0;
  align-items: center;
  border-top: 1px solid #F1F1F1;
  border-bottom: 1px solid #F1F1F1;

  .ffun {
    font-size: 13px;
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #2F333A;

    img {
      width: 16px;
      margin-right: 4px;
    }
  }

  .ffun-s {
    margin-right: 10px;
    color: #F1F1F1;
  }
}

/deep/.ivu-input:hover {
  border-color: #FF186B;
}

/deep/.ivu-input:focus {
  border-color: #FF186B;
}

/deep/.ivu-checkbox-checked .ivu-checkbox-inner {
  background-color: #FF186B;
  border-color: #FF186B;
}

.good-info {
  overflow: hidden;

  .info-store {
    border-bottom: 1px solid #E9EAF3;

    .store-icon {
      width: 52px;
      height: 52px;
    }

    .store-text {
      max-width: 800px;
    }

    .btn-store {
      height: 44px;
      border: 1px solid #FF186B;

      &:hover {
        color: #FF186B;
      }
    }
  }

  .shop-name {
    display: flex;
    align-items: center;

    .icon {
      display: block;
      width: 20px;
    }

    .name {
      margin-left: 8px;
      color: @t-label-color;
      font-size: 16px;
      font-weight: 500;
    }

    .btn {
      padding: 2px 12px;
      margin-left: 16px;
      background: @primary-color;
      border-radius: 2px 2px 2px 2px;
      color: #ffffff;
      font-size: 12px;
    }
  }

  .title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    //margin-top: 24px;
    .title-left {
      flex: 1;
      display: flex;
      justify-content: space-between;

      .text {
        display: block;
        width: 70%;
        font-family: PingFang HK, PingFang HK;
        font-weight: 500;
        font-size: 24px;
        color: #1E1714;
        line-height: 30px;
        word-wrap: break-word;

        .type {
          display: inline-block;
          vertical-align: top;
        }
      }

      .fun-wrap {
        display: flex;
        align-items: center;
        width: 100%;
        // margin-top: 6px;
        height: 30px;

        .fun {
          display: flex;
          align-items: center;
          gap: 4px;
          margin-left: 12px;
          cursor: pointer;

          .icon {
            color: #FF186B;
            flex: 0 0 14px;
            display: block;
            width: 15px;
            height: 15px;
          }

          .fun-text {
            margin-left: 4px;
            color: #FF186B;
            font-size: 18px;
            font-weight: 500;
            line-height: 18px;
          }

          .fun-blue {
            color: #3370FF !important;
          }
        }
      }
    }

    .volume {
      text-align: center;
      padding-left: 16px;
      border-left: 1px solid #ececec;

      .num {
        display: block;
        color: @t-title-color;
        font-size: 18px;
        line-height: 18px;
        font-weight: 900;
      }

      .tooltip-text {
        display: flex;
        align-items: center;
        cursor: pointer;

        span {
          color: #999999;
          font-weight: 500;
          font-size: 12px;
          line-height: 12px;
        }

        .icon {
          display: block;
          margin-left: 2px;
          width: 12px;
        }
      }
    }
  }

  .return-tips {
    display: inline-block;
    padding: 5px 15px 7px 14px;
    background: #FFEAF0;
    border-radius: 45px 45px 45px 45px;
    border: 1px solid #FF186B;
    margin-top: 12px;
    font-family: PingFang HK, PingFang HK;
    font-weight: 400;
    font-size: 16px;
    color: #FF186B;
    line-height: 19px;
  }

  .booking-detail {
    margin-top: 24px;
    display: flex;
    align-items: center;

    .booking-price {
      margin-left: 20px;
      height: 52px;
      position: relative;
      display: flex;
      align-items: center;
      font-size: 0;

      .booking-left {
        color: #FF186B;
        padding-left: 12px;
        border-radius: 8px 0 0 8px;
        background: linear-gradient(92deg, #FFEEF4 0%, #FDF2F0 100%);
        padding-right: 8px;
        height: 52px;
        display: flex;
        align-items: center;

        .bleft-text {
          font-size: 18px;
          line-height: 18px;
          font-weight: 500;
        }

        .bright-text {
          margin: 0 6px;
          font-size: 24px;
          line-height: 24px;
          font-weight: 600;
        }
      }

      .driver-img {
        height: 52px;
        width: auto;
      }

      .booking-right {
        height: 52px;
        padding: 0 16px 0 12px;
        background: #FF336B;
        border-radius: 0 8px 8px 0;
        color: #fff;
        font-size: 24px;
        line-height: 24px;
        display: flex;
        align-items: center;
        font-weight: 600;
      }

      .label-tag {
        width: 28px;
        height: 24px;
        position: absolute;
        top: -14px;
        left: -14px;
        z-index: 1;
      }

      .booking-discount {
        display: flex;
        top: -14px;
        left: 5px;
        position: absolute;

        .discount-div {
          background: #FF336B;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 6px;
          color: #fff;
          font-size: 14px;
          line-height: 14px;
          font-weight: bold;
          border-radius: 4px;
        }

        .discount-faj {
          display: flex;
          align-items: center;
          justify-content: center;

          .discount-label {
            width: 0;
            height: 0;
            border-top: 4px solid #FF336B;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
          }
        }
      }
    }

    .booking-original {
      height: 52px;
      display: flex;
      align-items: center;
      font-size: 22px;
      line-height: 22px;
      font-weight: 600;
      color: #767B93;

      .original-num {
        color: #1E1714;
        margin-right: 8px;
      }

      .original-cny {
        display: flex;
        align-items: center;

        .original-ml8 {
          margin-left: 8px;
        }
      }
    }
  }

  .price-top {
    margin-top: 24px;

    .top-original {
      display: flex;
      align-items: flex-end;
      color: #AEB0B9;
      font-weight: bold;
      font-size: 20px;
      line-height: 20px;
      margin-bottom: 16px;

      .original-price {
        margin-left: 14px;
        position: relative;

        .price-num {
          font-size: 32px;
          line-height: 24px;
          margin-left: 10px;
        }

        .price-y {
          margin: 0 10px;
        }

        .price-line {
          width: 100%;
          height: 2px;
          background: #AEB0B9;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
        }
      }

      .original-l {
        text-decoration: line-through;
      }
    }

    .goods-img {
      display: none;
      width: 90px;
      height: 90px;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
        display: block;
      }
    }
  }

  .pin-top {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .price-wrap {
    font-family: PingFang SC, PingFang SC;
    // font-weight: 500;
    font-weight: 700;
    font-size: 22px;
    color: #1E1714;
    line-height: 26px;

    display: flex;
    align-items: center;

    .price-save {
      margin-left: 20px;

      .save-text {
        font-family: Inter, Inter;
        font-weight: 500;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
        margin-left: 10px;
      }
    }

    .price {
      font-family: PingFang SC, PingFang SC;
      color: #FF186B;
      height: 40px;
      display: flex;
      align-items: center;

      :deep(.big-text) {
        font-size: 32px;
        font-weight: 700 !important;
        margin-right: 10px;
      }

      :deep(.big-text1) {
        font-size: 24px !important;
      }

      :deep(.big-label) {
        font-size: 16px;
        font-weight: 500;
        color: #FF186B;
        margin-right: 10px;
        display: block;
        height: 16px;
        line-height: 16px;
        padding-top: 5px;
      }
    }

    .patch-sty {
      .price-label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 22px;
        color: #1E1714;
        line-height: 33px;
      }

      .pin-price {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 22px;
        color: #767B93;
        line-height: 33px;
      }
    }

    .edit {
      display: flex;
      align-items: center;
      margin-left: 20px;
      cursor: pointer;

      span {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: rgba(150, 150, 150, 1);
        line-height: 21px;
      }
    }
  }

  .tips {
    height: 26px;
    padding: 0px 12px;
    border-radius: 6px;
    background: rgba(255, 24, 107, 0.10);
    display: inline-block;
    line-height: 26px;
    color: #FF186B;
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 20px;
  }

  .diff-tip {
    position: relative;



    .arrow-icon {
      position: absolute;
      bottom: -20px;
      left: 26px;
      color: #FF326C;
      font-size: 28px;
    }

    .text {
      max-width: 72px;
      min-width: 72px;
      padding: 4px 6px;
      background: linear-gradient(299deg, #FF326C 0%, #FF3434 41%, #FF3810 100%);
      border-radius: 4px 4px 4px 4px;
      font-family: Open Sans, Open Sans;
      font-weight: bold;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 16px;
    }
  }

  .group-rect {
    display: flex;

    .left {
      padding: 9px 12px;
      display: flex;
      align-items: center;
      border-radius: 8px 0 0 8px;
      background: linear-gradient(92deg, #FFEEF4 0%, #FDF2F0 100%);

      .label-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #FF186B;
        line-height: 24px;
      }

      .price {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #FF186B;
        line-height: 28px;
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
      }
    }

    .right {
      padding-right: 16px;
      display: flex;
      align-items: center;
      background: #FF336B;
      border-radius: 0 8px 8px 0;



      .text-sty {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 28px;
      }
    }
  }

  .logistics-info {
    position: relative;
    margin-top: 14px;
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #F1F1F1;

    .logistics-item {
      display: flex;
      align-items: center;

      .sept-icon {
        display: block;
        width: 24px;
      }

      .left {
        flex: 1;
        display: flex;
        align-items: center;
        margin-left: 8px;

        .left-content-wrap {
          display: inline-block;

          .left-content {
            display: flex;
            align-items: center;
          }
        }

        .left-text-wrap {
          display: inline;
          position: relative;
          height: 24px;

          .hint-text {
            top: 2px;
            left: 0;
            right: 0;
            color: @t-title-color;
            font-size: 14px;
            font-weight: 500;
          }
        }

        .text {
          color: @t-title-color;
          font-size: 14px;
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
          font-weight: 500;
        }

        .icon {
          display: block;
          width: 16px;
          margin: 0 4px;
        }

        .estimate {
          cursor: pointer;
          color: #969696;
          margin-top: 2px;
          margin-left: 4px;
          text-decoration: underline;
          text-decoration-line: underline;
          text-decoration-style: solid;
        }

        .input-amount {
          display: flex;
          align-items: center;
          color: @t-title-color;
          font-size: 14px;
          font-weight: 500;

          .text {
            white-space: nowrap;
          }

          .free {
            display: block;
            width: 48px;
            height: 24px;
            margin: 0 4px;
            text-align: center;
            line-height: 24px;
            background: #ffffff;
            border-radius: 2px 2px 2px 2px;
            opacity: 1;
            color: #FF186B;
            font-size: 12px;
            font-weight: 500;

            :deep(.ivu-input) {
              width: 48px;
              height: 24px;
              color: #FF186B;
              text-align: center;
            }
          }

          .input {
            display: block;
            width: 48px;
            height: 24px;
            margin: 0 4px;
            text-align: center;
            background: #ffffff;
            border-radius: 2px 2px 2px 2px;
            color: @t-title-color;
            font-size: 12px;
            border: none;

            &:focus {
              outline: 1px solid @primary-color;
            }

            &:hover {
              border: 1px solid @primary-color;
            }
          }
        }
      }

      .top-left {
        display: block;
        position: absolute;
        left: 48px;
        top: 24px;
      }
    }

    .tips-img {
      display: flex;
      border-radius: 6px;
      background: #FF186B;
      border-radius: 6px;
      color: #ffffff;
      margin-top: 24px;
      width: 100%;
      align-items: center;
      justify-content: center;
      height: 26px;

      img {
        width: 16.66666603088379px;
        height: 15px;
        display: block;
        margin-right: 10px;
      }
    }

    .logistics-line {
      width: 1px;
      height: 32px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      background: #FF186B;
      margin: 6px 0;
      margin-left: 12px;
    }

    .ivu-badge {
      width: 100%;

      /deep/ .ivu-badge-count {
        right: 30px;
      }
    }
  }

  .comm-size {
    .label {
      display: block;
      margin-right: 6px;
      margin-bottom: 6px;
      color: @t-title-color;
      font-size: 14px;
      font-weight: 500;

      .value {
        color: #FF186B;
      }
    }

    .size-list {
      display: block;
      overflow: hidden;

      .size-item {
        float: left;
        padding: 4px 12px;
        background: #ffffff;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid #dcdee2;
        cursor: pointer;
        color: @t-title-color;
        font-size: 14px;
        font-weight: 400;
        margin-right: 10px;
        margin-bottom: 10px;
      }

      .image-item {
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid #dcdee2;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;

        img {
          width: 100%;
        }
      }

      .active {
        border: 1px solid @primary-color;
        color: @primary-color;
      }
    }
  }

  .select-type-box {
    .type-item {
      margin-top: 24px;

      .type-label {
        display: block;
        margin-right: 6px;
        margin-bottom: 6px;
        color: @t-title-color;
        font-size: 14px;
        color: #969696;

        .num {
          margin-left: 5px;
          ;
        }
      }

      .list-sty {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 16px;
        margin-bottom: 24px;
        border-radius: 8px;
        border: 1px solid #F1F1F1;
        padding: 10px;

        .textarea {
          border: none !important;
        }

        /deep/ .ivu-input {
          border: none !important;
        }

        .gap-icon {
          width: 34px;
          height: 34px;
        }


        .preview-img {
          position: relative;

          .upload-image {
            width: 160px;
            height: 150px;
            border-radius: 11px 11px 11px 11px;
          }

          .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 160px;
            height: 150px;
            background-color: transparent;
            display: none;
          }

          .delete-icon {
            display: none;
          }
        }

        .preview-img:hover>.overlay {
          display: block;
          border-radius: 11px;
          background-color: rgba(0, 0, 0, 0.5);
        }

        .preview-img:hover>.delete-icon {
          display: block;
          width: 60px;
          height: 60px;
          position: absolute;
          top: 50px;
          left: 50px;
          z-index: 2;
          cursor: pointer;
        }

        .upload-sty {
          width: 160px;
          height: 150px;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          position: relative;
          border-radius: 4px;
          border: 1px dashed #D7D7D7;
          background: #FFF;
          flex-direction: column;

          .upload-img {
            width: 60px;
            height: 60px;
            margin-bottom: 8px;
          }

          .bot-text {
            font-family: Annapurna SIL, Annapurna SIL;
            font-weight: 400;
            font-size: 14px;
            color: #767B93;
            line-height: 16px;
            text-align: center;
            padding: 6px 0;
            color: #CACACA;
            padding: 0 30px;
          }
        }
      }

      .textarea {
        :deep(.ivu-input-word-count) {
          font-size: 14px;
        }

        &:deep(.ivu-input) {
          font-size: 14px;
          border-radius: 11px;
          padding: 16px;
        }
      }
    }

    .custom-item {

      .custom-label {
        font-family: PingFang HK, PingFang HK;
        font-weight: 500;
        font-size: 21px;
        color: #1E1714;

        .custom-tips {
          font-size: 16px;
          color: #AFAFAF;
        }
      }
    }

    .order-num {
      display: flex;
      flex-direction: column;
      margin-top: 0;

      .type-label {
        display: flex;
        align-items: center;
        margin-bottom: 0px;
        height: 32px;
        margin-bottom: 5px;
        font-size: 14px;
        color: #969696;
      }

      .left {
        .left-content {
          display: flex;
          align-items: center;
        }

        .line {
          width: 1px;
          height: 10px;
          display: block;
          background: #CACACA;
        }

        .min-quantity {
          color: @t-text-color;
          font-size: 12px;
          display: block;
          margin-left: 20px;
        }
      }

      /deep/ .ivu-input-number-input {
        text-align: center;
      }

      .amount-sale {
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 12px;
        color: #AFAFAF;
        line-height: 22px;
        margin-left: 32px;
        margin-right: 20px;
      }
    }
  }

  .pay-text {
    display: flex;
    margin-top: 16px;
    color: #969696;
    font-size: 12px;
    height: 34px;
    align-items: center;
  }

  .group-mt24 {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .buy-tips {
    color: @t-good-special-color;
    font-size: 16px;
  }

  .tips-text {
    padding: 21px 16px;
    background: #FFEAF0;
    border-radius: 11px;
    font-family: PingFang HK, PingFang HK;
    font-weight: 400;
    font-size: 19px;
    color: #FF186B;
    line-height: 22px;
    text-align: justify;
    display: flex;
    align-items: flex-start;

    .text-sub {
      width: calc(100% - 40px);
      margin-left: 10px;
    }
  }

  .buy-help {
    color: #FF186B;
    font-size: 16px;
  }

  .div-line {
    margin: 16px 0;
    height: 1px;
    background: @t-div-line-color;
    border-radius: 2px 2px 2px 2px;
  }

  .ivu-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
  }

  .agree {
    font-family: PingFang HK, PingFang HK;
    font-weight: 400;
    font-size: 14px;
    color: #1E1714;
    line-height: 22px;

    .link {
      color: #FF186B;
      cursor: pointer;
      text-decoration: underline;
      text-decoration-line: underline;
      text-decoration-style: solid;
    }
  }

  .flow {
    margin-top: 20px;
  }

  .buy {
    display: flex;
    align-items: center;
    margin-top: 19px;
    justify-content: space-between;
    gap: 24px;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      width: 140px;
      height: 52px;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      color: #FF186B;
      cursor: pointer;
      border: 1px solid #FF186B;
      font-size: 16px;
      font-weight: 500;
      gap: 8px;
    }

    .buy-btn {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 24px;
      background: #FF186B;
      border-color: #FF186B;
      border-radius: 11px;
      // padding: 20px 61px;
      cursor: pointer;
      min-width: 180px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      box-sizing: border-box;
      width: 50%
    }

    .add-btn {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #FF186B;
      border-radius: 11px;
      // padding: 20px 61px;
      border: 1px solid #FF186B;
      cursor: pointer;
      min-width: 180px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      box-sizing: border-box;
      width: 50%;
    }

    .pin-area {
      position: relative;
      width: 70%;

      .pin-btn {
        padding: 12px 42px;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #FF186B;
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 24px;
        color: #FF186B;
        line-height: 28px;
        cursor: pointer;
      }

      .tag-ri {
        position: absolute;
        top: -32px;
        left: 50%;
        min-height: 28px;
        background: linear-gradient(299deg, #FF326C 0%, #FF3434 41%, #FF3810 100%);
        border-radius: 12px 16px 16px 0px;
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 22px;
        padding: 1px 10px;
        display: inline-flex;
        align-items: center;
        gap: 4px;

        .symbol-icon {
          font-weight: 600;
        }

        .tip-content {
          color: #1E1714;
        }
      }
    }
  }
}

.good-info-main {
  &.fixed {
    position: fixed;
    top: 120px;
    left: 50%;
    width: 539px;
    background-color: #fff;
    padding: 20px;
    margin-left: -660px;
    box-shadow: 0px 9px 40px 0px rgba(0, 0, 0, 0.12);
    border-radius: 20px;

    .title,
    .ffun-w,
    .pay-text,
    .logistics-info {
      display: none;
    }

    .price-top {
      position: relative;
      padding-left: 100px;
      margin-top: 0;
      height: 90px;

      .goods-img {
        display: block;
        position: absolute;
        left: 0;
        top: 0;

      }
    }

    .flow {
      border-top: 1px solid #F1F1F1;
      margin-bottom: 20px;
    }

    .select-type-box {
      .select-type {
        max-height: 260px;
        overflow-y: auto;
      }
    }

    .select-type {
      /deep/ .order-num {
        margin-top: 0;
      }
    }

    .left-content {
      .amount-sale {
        font-size: 12px;
      }

      /deep/ .min-quantity {
        font-size: 12px !important;
      }
    }

    /deep/ .comm-size {
      .label {
        font-size: 12px;
        margin: 10px 0;
      }
    }

    /deep/ .ivu-checkbox-wrapper .agree {
      font-size: 14px;
    }
  }
}
</style>
